<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        #box {
            height: 600px;
            width: 800px;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        #scroller {
            transition: all 1s;
            position: relative;
        }

        #scroller img {
            height: 600px;
            width: 800px;
            position: absolute;
        }

        .control {
            height: 20px;
            position: absolute;
            z-index: 999;
            left: 45%;
            bottom: 100px;
            transform: translateX(16px);
        }

        .point {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            cursor: pointer;
            border: 1px solid white;
            margin-right: 5px;
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="scroller">
    </div>
</div>
<script>
    var images = ["imgs/1.jpg", "imgs/2.jpg", "imgs/1.jpg", "imgs/2.jpg"];
        for (var i = 0; i < images.length; i++) {
            var img = document.createElement("img");
            img.src = images[i];
            img.style.left = i * 800 + "px";
            $("#scroller").append(img);
        }

        var lastImg = document.createElement("img");
        lastImg.src = images[0];
        lastImg.style.left = images.length * 800 + "px";
        $("#scroller").append(lastImg);


        var controller = document.createElement("div");
        // $(controller).attr("class", "control");

        var $controller = $(controller);
        $controller.addClass("control");
        controller.style.width = images.length * 20 + "px";
        $("#box").append($controller);

        //6.在控制区域中创建中间的圆圈  遍历images数组
        for (var j = 0; j < images.length; j++) {
            var circle = document.createElement("div");
            //设置class值
            $(circle).addClass("point");
            //将circle追加到控制区域
            $(".control").append(circle);
        }

        $(".point").first().css("background-color", "white");

        var imageIndex = 0;
        setInterval(function() {
            imageIndex++;
            if (imageIndex > images.length) {
                imageIndex = 1;
            }
            var offset = -imageIndex * 800;
            $("#scroller").css("transform", "translateX(" + offset + "px)");

            $(".point").css("background-color", "transparent");
            $(".point").eq(imageIndex % images.length).css("background-color", "white");

            if (imageIndex == images.length) {
                setTimeout(function() {
                    $("#scroller").css("transition", "none");
                    $("#scroller").css("transform", "translate(0,0)");
                    setTimeout(function() {
                        $("#scroller").css("transition", "all 1s");
                    }, 10);
                }, 1000);
            }
        }, 2000);

        $(".point").on("click", function() {
            $(".point").css("background-color", "transparent");
            imageIndex = $(this).index();
            var offset = -imageIndex * 800;
            $("#scroller").css("transform", "translateX(" + offset + "px)");
            $(this).css("background-color", "white");
        });

</script>
</body>
</html>